<template>
  <div>
    <page-list :x-uri="uri" :doactions="doactions" :custom-components="customComponents">
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <tabs />
      </template>
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-button v-auth="'exam.paper.create'" size="mini" type="primary" @click="visible = true">新建试卷</el-button>
      </template>
      <!-- 多选操作 -->
      <template v-slot:table-button="scope">
        <el-button v-auth="'exam.paper.delete'" size="mini" @click="deletes(scope)">删除</el-button>
      </template>
    </page-list>
    <!-- 弹窗 -->
    <el-dialog title="新增试卷" :visible.sync="visible" width="500px" top="30vh">
      <div class="newtopic-popup">
        <div class="item" @click="createSettled">
          <el-image :src="require('@/assets/exam/fixed_icon.png')" />
          <div class="title">固定卷</div>
          <div class="desc">选择指定的题目组成试卷</div>
        </div>
        <div class="item" @click="createRandom">
          <el-image :src="require('@/assets/exam/random_icon.png')" />
          <div class="title">随机卷</div>
          <div class="desc">指定试卷包含的题型组成试卷</div>
        </div>
      </div>
    </el-dialog>
    <!-- 分享试卷设置 -->
    <share-config-dialog v-if="shareConfigDialogVisible" :visible.sync="shareConfigDialogVisible" :paper="sharePaper" />
  </div>
</template>

<script>
import PageList from '@public/template/page_list.vue';
import Tabs from './tabs';
import Status from './components/status.vue';
import ShareConfigDialog from './components/ShareConfigDialog'

export default {
  components: {
    PageList,
    Tabs,
    ShareConfigDialog
  },
  inject: ['reload'],
  data() {
    return {
      uri: '/exam/admin/paper/list',
      doactions: [
        { title: '详情', meta: { permission: 'exam.paper.detail' }, callback: this.details },
        { title: '考试记录', meta: { permission: 'exam.paper.record' }, callback: this.record },
        { title: '学员', meta: { permission: 'exam.paper.student' }, callback: this.student },
        { title: '分享', meta: { permission: 'exam.paper.share' }, callback: this.share },
        { title: '编辑', meta: { permission: 'exam.paper.edit' }, callback: this.edit },
        { title: '删除', meta: { permission: 'exam.paper.delete' }, callback: this.delete }
      ],
      visible: false,
      customComponents: {
        status: Status
      },
      shareConfigDialogVisible: false,
      sharePaper: {}
    };
  },
  methods: {
    // 新建试卷-固定试卷
    createSettled: function() {
      this.$router.push({ path: '/exam/paper/settled/create' });
    },
    // 新建试卷-随机试卷
    createRandom: function() {
      this.$router.push({ path: '/exam/paper/random/create' });
    },
    // 考试记录
    record({ row }) {
      const type = {
        1: 'settled',
        2: 'random'
      };
      this.$router.push({ path: '/exam/paper/' + type[row.paper_type] + '/' + row.id + '/record' });
    },
    // 学员
    student({ row }) {
      this.$router.push({ path: '/exam/paper/' + row.id + '/student' });
    },
    // 编辑
    edit: function({ row }) {
      const type = {
        1: 'settled',
        2: 'random'
      };
      this.$router.push({ path: '/exam/paper/' + type[row.paper_type] + '/' + row.id + '/edit' });
    },
    // 分享考试
    share({ row }) {
      this.sharePaper = row
      this.shareConfigDialogVisible = true
    },
    details: function({ row }) {
      const type = {
        1: 'settled',
        2: 'random'
      };
      this.$router.push({ path: '/exam/paper/' + type[row.paper_type] + '/' + row.id + '/details' });
    },
    // 删除
    delete: function({ row }) {
      this.$box
        .confirm('确认删除吗')
        .then(() => {
          this.$http.delete(
            '/exam/admin/paper/' + row.id + '/delete',
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    // 批量删除
    deletes: function({ rows }) {
      var ids = rows.map(row => row.id);
      if (ids.length === 0) {
        this.$message.warning('请选择要删除的试卷');
        return false;
      }
      ids = ids.join(',');
      this.$box
        .confirm('确认删除吗')
        .then(() => {
          this.$http.delete(
            '/exam/admin/paper/deletes/' + ids,
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    }
  }
};
</script>
<style lang="scss" scoped>
.newtopic-popup {
  display: flex;
  justify-content: space-around;
  .item {
    width: 208px;
    height: 140px;
    padding: 20px 15px;
    background: #ffffff;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    border: 1px solid #e4e7ed;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-sizing: border-box;
    &:hover,
    &:active {
      border-color: #5191ff;
    }
    .title {
      margin-top: 8px;
      font-size: 14px;
      font-weight: 500;
      color: #303133;
    }
    .desc {
      margin-top: 6px;
      font-size: 12px;
      font-weight: 400;
      color: #909399;
      line-height: 18px;
      text-align: center;
    }
  }
}
</style>
